The Making of GeoJobs Design (Web App)

Introduction

Material design is a unified system of visual, motion, and interaction design that adapts across different devices. Material design is inspired by tactile materials, such as paper and ink. Material surfaces interact in a shared space. Surfaces can have elevation (z-height) and cast shadows on other surfaces to convey relationships.

Optimization

The interior text pages are used mainly for reports, stories, updates, or anything that is not raw data. This page serves a sample of all the various forms to present information. A few things that were considered (in a few different ways):

• Font size
• Font weight
• Line height
• Letter Spacing

Font-size and font-weight were increased to improve contrast against the white/grayish background. A thin font was very difficult to read with this background, specially on displays with lower pixel density. The line-height was also increased to give the lines some breathing room in between. This facilitates jumping from line to line while reading. Lastly, letter-spacing was also nudged ever so slightly to separate the individual characters and decrease the number of characters per line.

Hyperlinks are also custom styled to fit the theme of the website. Hovering over them triggers an animation that is different from the typical boring text underline. It is not the default style, however. In order to take advantage of it the class fancyLink must be applied to the desired anchor tag. Anchor links have an initial blue state. Studies show that certain colors can be used to associate emotions and can be used for brand augmentation.

Framework

This site is powered by the 1140px CSS framework. The reasoning is:

960 pixels based grids were standard for last couple of years. They perfectly fitted 1024 px wide screens. Nowadays, bigger resolutions are more popular. Screens that are 1024 pixels wide are still quite popular, but those are used by mobile devices mainly. 1140px wide grid is being displayed perfectly on all screens that are 1280 pixels wide. Due to its responsiveness it works correctly on smaller screen resolutions.

This framework utilizes the most amount of horizontal space for wide displays and gracefully resizes to fit smaller displays such as tablets and mobile devices.

The framework is very easy to use and unlocks many layout possibilities with its columnX classes, where X represents the number of horizontal columns up to a maximum of 12 including gutters. For example:

You get the point! This framework facilitates the creation of other elements, such as cards: